<!--
 * @Author: yxiawen
 * @Date: 2022-01-24 14:35:55
 * @LastEditTime: 2022-01-24 15:58:57
 * @LastEditors: yxiawen
 * @Description: 
 * @FilePath: /vite-project/src/components/login/userLogin.vue
-->
<template>
  <div class="user-login">
    <div class="user-login-bg"
         :style="{ 'background-image': `url(${backgroundImage})` }"></div>
    <div class="content-wrapper">
      <h2 class="slogan">
        欢迎使用系统后台
      </h2>
      <div class="form-container">
        <h4 class="form-title">登录</h4>
        <a-form :model="formState"
                @finish="onFinish"
                @finishFailed="onFinishFailed">
          <a-form-item name="name"
                       :rules="[{ required: true, message: 'Please input your username!' }]">
            <a-input v-model:value="formState.name"
                     placeholder="会员名/手机号/邮箱">
              <template #prefix>
                <UserOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item name="pwd"
                       :rules="[{ required: true, message: 'Please input your password!' }]">
            <a-input-password v-model:value="formState.pwd"
                              placeholder="密码">
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-button type="primary"
                      html-type="submit">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

import { reactive, onMounted, toRefs, getCurrentInstance } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const backgroundImage =
  "https://img.alicdn.com/tfs/TB1zsNhXTtYBeNjy1XdXXXXyVXa-2252-1500.png";
export default {
  name: "UserLogin",
  //import引入的组件需要注入到对象中才能使用
  components: {
    UserOutlined,
    LockOutlined,
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const state = reactive({
      backgroundImage: backgroundImage,
    });
    const formState = reactive({
      name: "admin",
      pwd: "admin",
    });
    const {
      appContext: {
        config: { globalProperties },
      },
    } = getCurrentInstance();
    // 在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问
    onMounted(() => {});
    const onFinish = () => {
      globalProperties.$apis.userApi.login(formState).then((res) => {
        console.log(res);
        if (res.code === 0) {
          message.success(`${res.data.user.realname}, 欢迎您！`);
          store.dispatch("setToken", res.data.user.token);
        }
      });
    };
    const onFinishFailed = (error) => {
      console.log(error);
    };
    return {
      ...toRefs(state),
      formState,
      onFinish,
      onFinishFailed,
    };
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import "./userLogin.scss";
</style>